<template>
  <div class="box">
      <!-- 导航 -->
      <div class="title">
          <div class="title_fan"><span class="el-icon-arrow-left" @click="$router.go(-1)"></span>我的收款二维码</div>
          <div class="title_back_img">
              <div class="mini_back">
                  <div>钱包余额</div>
                  <div>
                      <img src="../../../../assets/static/membership/a4.png" alt="">
                      <span>2017.25</span>
                  </div>
              </div>
              <div class="big_back">
                  <img src="../../../../assets/static/membership/a1.png" alt="">
                  <div>
                      <div class="progress">
                          <div class="back_progress"></div>
                      </div>
                      <div>二维码刷新时间剩余24s</div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
    .box{
        width: 750px;
        height: 100vh;
        background-color: #f5f5f5;
        .title{
            background-image: linear-gradient(to bottom, #7AC91B 25%, #f5f5f5 0);
            .title_fan{
                color: #fff;
                font-size: 18px;
                text-align: center;
                padding: 15px;
                .el-icon-arrow-left{
                    float: left;
                    margin-top: 5px;
                }
            }
        }
        .title_back_img{
            background-image: url(../../../../assets/static/membership/a5.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding: 5px 0;
            .mini_back{
                text-align: center;
                font-size: 15px;
                padding: 20px 0;
                >div:nth-child(2){
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 15px;
                    img{
                        width: 25px;
                        height: 25px;
                    }
                    span{
                        font-size: 28px;
                        font-weight: 600;
                        margin-left: 13px;
                    }
                }
            }
            .big_back{
                margin: 50px;
                text-align: center;
                font-size: 11px;
                img{
                    width: 90%;
                }
                .progress{
                    margin: 5px 0;
                    width: 100%;
                    height: 10px;
                    padding: 5px 4px;
                    background-image: url(../../../../assets/static/membership/a2.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    .back_progress{
                        background-color: #FFB200;
                        width: 30%;
                        height: 10px;
                        border-radius: 15px;
                    }
                }
            }
        }
    }
</style>